import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
/*
数据懒加载：dom滚动到显示区域
需要知道是哪一个dom
   取dom
      1:const target=ref(null)
      2:return {target}
      3: div ref="target"
滚动到显示区域调用接口，需要知道接口的名字，
返回给我们接口调用后的数据
*/

export function lazyLoad (fn) {
  const goods = ref([])
  // 处理懒加载
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    // target:需要监听的目标dom
    target,
    ([{ isIntersecting }], option) => {
      // isIntersecting:是否进入可视区域 true就是进入，false:没进入  options:读取当前配制
      if (isIntersecting) {
        stop()
        fn().then(res => {
          goods.value = res.result
        })
      }
    },
    // 设置配制
    { threshold: 0 }
  )
  return { target, goods }
}
